<script lang="ts" setup>
// CreateInvitationDialog 和 StatsCards 组件已通过 Vite 自动导入
import { useInvitationManagement } from "./composables/useInvitationManagement"

// 使用业务逻辑
const {
  loading,
  tableLoading,
  searchKeyword,
  statusFilter,
  versionFilter,
  showCreateDialog,
  paginatedInvitationCodes,
  productVersions,
  statusOptions,
  statsCards,
  headerButtons,
  currentPage,
  pageSize,
  total,
  copyInvitationCode,
  getStatusTagType,
  getStatusText,
  handlePageChange,
  handleSizeChange,
  handleCreateInvitation
} = useInvitationManagement()
</script>

<template>
  <div class="app-container">
    <div class="page-content">
      <!-- 页面头部 -->
      <PageHeader
        title="邀请码管理"
        subtitle="生成和管理与产品版本关联的邀请码"
        :buttons="headerButtons"
      />

      <!-- 统计卡片 -->
      <StatsCards :cards="statsCards" :loading="loading" />

      <!-- 搜索和筛选区域 -->
      <div class="filter-section">
        <div class="search-box">
          <el-input
            v-model="searchKeyword"
            placeholder="搜索邀请码、代理商或兑换手机号..."
            clearable
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </div>

        <div class="filter-controls">
          <el-select
            v-model="statusFilter"
            placeholder="全部状态"
            style="width: 120px"
          >
            <el-option
              v-for="option in statusOptions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>

          <el-select
            v-model="versionFilter"
            placeholder="全部版本"
            style="width: 140px"
          >
            <el-option
              v-for="option in productVersions"
              :key="option.value"
              :label="option.label"
              :value="option.value"
            />
          </el-select>
        </div>
      </div>

      <!-- 邀请码列表表格 -->
      <div class="table-section">
        <div class="table-header">
          <h3>邀请码列表</h3>
        </div>

        <el-table
          :data="paginatedInvitationCodes"
          :loading="tableLoading"
          style="width: 100%"
          class="invitation-table"
        >
          <el-table-column prop="code" label="邀请码" width="160">
            <template #default="{ row }">
              <div class="code-cell">
                <span class="code-text">{{ row.code }}</span>
                <el-button
                  link
                  size="small"
                  @click="copyInvitationCode(row.code)"
                  class="copy-btn"
                >
                  <el-icon><CopyDocument /></el-icon>
                </el-button>
              </div>
            </template>
          </el-table-column>

          <el-table-column prop="agentPath" label="归属代理" min-width="180">
            <template #default="{ row }">
              <div class="agent-path">{{ row.agentPath }}</div>
            </template>
          </el-table-column>

          <el-table-column prop="productVersion" label="产品版本" width="200">
            <template #default="{ row }">
              <div class="version-cell">{{ row.productVersion }}</div>
            </template>
          </el-table-column>

          <el-table-column prop="status" label="状态" width="100">
            <template #default="{ row }">
              <CustomTag
                :text="getStatusText(row.status)"
                :type="getStatusTagType(row.status)"
                size="small"
              />
            </template>
          </el-table-column>

          <el-table-column prop="createTime" label="创建时间" width="120">
            <template #default="{ row }">
              <div class="time-cell">{{ row.createTime }}</div>
            </template>
          </el-table-column>

          <el-table-column prop="expireTime" label="有效期" width="120">
            <template #default="{ row }">
              <div class="time-cell">{{ row.expireTime }}</div>
            </template>
          </el-table-column>

          <el-table-column label="兑换信息" width="140">
            <template #default="{ row }">
              <div class="redeem-info">
                <div v-if="row.redeemPhone" class="phone">{{ row.redeemPhone }}</div>
                <div v-if="row.redeemTime" class="time">{{ row.redeemTime }}</div>
                <div v-if="!row.redeemPhone && !row.redeemTime" class="no-data">-</div>
              </div>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="80" fixed="right">
            <template #default="{ row }">
              <el-button
                link
                size="small"
                @click="copyInvitationCode(row.code)"
              >
                <el-icon><CopyDocument /></el-icon>
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <!-- 分页 -->
        <div class="pagination-section">
          <el-pagination
            v-model:current-page="currentPage"
            v-model:page-size="pageSize"
            :page-sizes="[10, 20, 50, 100]"
            :small="false"
            :disabled="loading"
            :background="true"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
            @size-change="handleSizeChange"
            @current-change="handlePageChange"
          />
        </div>
      </div>
    </div>

    <!-- 生成邀请码弹窗 -->
    <CreateInvitationDialog
      v-model="showCreateDialog"
      @confirm="handleCreateInvitation"
    />
  </div>
</template>

<style lang="scss" scoped>
@import "./styles/index.scss";
</style>
